import React, { useState ,useEffect} from "react";
import './css/todo-bottom.less'

function TodoBottom(props) {
  const [noCompletedCount,setNoCompletedCount] =useState(0);
  const todoArr=props.todoArr;
  const propsActive=props.isActive;
  useEffect(()=>{
    getCompletedCount();
  },[todoArr])

  const handleClickBottom=(e)=>{
    props.handleClickBottom(e);
    console.log(e.target.getAttribute("type"));
    
  }
   //获取完成的数量
   const getCompletedCount=()=>{
    const newArr = JSON.parse(JSON.stringify(todoArr));
    const noCompletedArr = newArr.filter((item) => {
      return item.isCompleted === false;
    });
    setNoCompletedCount(noCompletedArr.length)
  }
  
  return (
    <>
    {todoArr.length>0?
      <ul className='todo-bottom'>
        <li className='li-first'>{noCompletedCount} item left</li>
        <li className={`li-all ${propsActive==='all'?'isActive':''}`} type="all" onClick={handleClickBottom}>All</li>
        <li className={`li-active ${propsActive==='active'?'isActive':''}`}  type="active" onClick={handleClickBottom}>Active</li>
        <li className={`li-completed ${propsActive==='completed'?'isActive':''}`} type="completed" onClick={handleClickBottom}>Completed</li>
        <li className={`li-clear ${propsActive==='clearCompleted'?'isActive':''}`} type="clearCompleted" onClick={handleClickBottom}>Clear completed</li>
      </ul>
    :<div></div> 
    }
    </> 
  )
}
export default TodoBottom;
